<!-- 货道管理 -->
<template>
	<view class="main">
		<view class="u-wrap">
			<view class="flex flex-jc-c flex-ai-c"
				style="background: #fff;padding: 20rpx 0;font-size: 30rpx;color: #666666;">
				<view style="margin-right: 60rpx;" @click="testIsShow = true">全货道测试</view>
				<view @click="allIsSHow = true">一键补齐</view>
			</view>
			<view class="u-menu-wrap">
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
					<view v-for="(item,index) in list" :key="item.storey_no" class="u-tab-item"
						:class="[current == item.storey_no ? 'u-tab-item-active' : '']" :data-current="item.storey_no"
						@tap.stop="swichMenu(index,item)">
						<text class="u-line-1">{{item.channel_storey_text}}</text>
					</view>
				</scroll-view>
				<view style="width: 0" class="f1">
					<template v-if="list.length && !list[index].goods_list.length">
						<view class="thumb-box flex flex-wrap-w">
							<image class="item-menu-image" src="" mode=""></image>
							<view class="item-menu-name f1" style="width: 0;">
								<text class="description">
									暂无数据
								</text>
							</view>
						</view>
					</template>
					<template  v-if="list.length && list[index].goods_list.length">
						<scroll-view scroll-y class="scroll" @scrolltolower="loadmore">
							<block v-for="(item, index) in list[index].goods_list.slice(0,page * pageSize)" :key="item.id">
								<view class="thumb-box flex flex-wrap-w"
									@click="skip(`/pages/equipment/cargoWayEdit`,item)">
									<view style="margin: 0 20rpx;">
										<u-image width="120rpx" height="120rpx" class="item-menu-image"
											:src="item.goods_main_image"></u-image>
									</view>
									<view class="item-menu-name f1 flex flex-dir-c flex-jc-sb">
										<view class="description">
											{{item.channel_no_text}}
										</view>
										<view class="description">
											{{item.description}}
										</view>
										<view class="flex flex-ai-c flex-jc-sb">
											<view>最大库存：{{item.max_stock}}</view>
											<view style="margin-right: 30rpx;" v-if="!type">
												<u-number-box size="20rpx" bg-color="#fff" :min="0"
													@change="(e) => change(e,item)" :max="item.max_stock"
													v-model="item.stock"></u-number-box>
											</view>
											<view style="margin-right: 30rpx;"
											 class="button2 btn"
											v-else @click.stop="chosse(item)">选择</view>
										</view>
									</view>
								</view>
							</block>
							<view style="padding: 30rpx 40rpx;">
								<u-loadmore :status="status" @loadmore="loadmore" />
							</view>
						</scroll-view>
					</template>

				</view>
			</view>
		</view>
		<u-modal :show="testIsShow" title="提示" :show-confirm-button="false">
			<view style="width: 100%;">
				<view style="padding-bottom: 37rpx;text-align: center;">
					<!-- 确定进行全货道旋转测试吗？ -->
					功能更新中
				</view>
				<view class="flex flex-ai-c flex-jc-c modal-btn" style="text-align: center">
					<view class="modal-btn-cofim" @click="confim(0)">是</view>
					<view class="modal-btn-cancal" @click="cancal(0)">否</view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="allIsSHow" title="提示" :show-confirm-button="false">
			<view style="width: 100%;">
				<view style="padding-bottom: 37rpx;text-align: center;">确定所有货道补齐最大库存吗？</view>
				<view class="flex flex-ai-c flex-jc-c modal-btn" style="text-align: center">
					<view class="modal-btn-cofim" @click="confim(1)">是</view>
					<view class="modal-btn-cancal" @click="cancal(1)">否</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import home from '@/api/home.js';
	export default {
		data() {
			return {
				testIsShow: false,
				allIsSHow: false,
				userinfo: uni.getStorageSync('userinfo'),
				list: [],
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				index: 0,
				id: null,
				device_no: null,
				type: null,
				status: 'loadmore',
				page: 1,
				pageSize: 8,
			};
		},
		onLoad(op) {
			this.id = op.id
			if (op.type) {
				this.type = op.type
			}
			if (op.device_no) {
				this.device_no = op.device_no
			}
			this.getDeviceChannal(op.id)
		},

		methods: {
			loadmore(){
				this.status = 'loading'
				if(this.list[this.index].goods_list.length <= (this.page * this.pageSize)) return this.status = 'nomore'
				this.status = 'loadmore'
				this.page ++
				// this.list[0].goods_list.slice(0,this.page * 5)
			},
			chosse(item) {
				uni.navigateBack({
					delta: 1,
					success: () => {
						this.$store.commit('selectedList', {
							...this.$store.state.selectedList,
							channel_no: item.channel_no
						})
					}
				})
			},
			skip(url, item) {
				if (this.type) return
				uni.navigateTo({
					url: url + `?device_no=${item.device_no}&channel_no=${item.channel_no}`
				})
			},
			async editDeviceChannal(num, channel_no, channel_status,goods_id) {
				const res = await home.editDeviceChannal({
					device_no: this.device_no,
					stock: num + '',
					channel_no: channel_no + '',
					channel_status,
					goods_id
				})
			},
			change({
				value
			}, item) {
				this.editDeviceChannal(value, item.channel_no, item.channel_status,item.goods_id)
			},
			cancal(type) {
				switch (type) {
					case 0:
						this.testIsShow = false
						break
					case 1:
						this.allIsSHow = false
						break
				}
			},
			confim(type) {
				switch (type) {
					case 0:
						this.testIsShow = false
						break
					case 1:
						this.allIsSHow = false
						this.stockDeviceChannal()
						break
				}
			},
			swichMenu(index, item) {
				this.current = item.storey_no
				this.index = index
				this.page = 1
				this.status = 'loadmore'
				if(this.list[this.index].goods_list.length <= (this.page * this.pageSize)) this.status = 'nomore'
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					this.getElRect('menu-scroll-view', 'menuHeight')
					this.getElRect('u-tab-item', 'menuItemHeight')
				}
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
			},
			async getDeviceChannal(id) {
				const res = await home.getDeviceChannal({
					device_id: id
				})
				// res.data[0].goods_list = res.data[0].goods_list.slice(0,this.page * 5)
				this.list = res.data
				// console.log(res.data[0].goods_list.slice(0,5))
			},
			getElRect(elClass, dataVal) {
				uni.createSelectorQuery().select("." + elClass).fields(({
					size: true
				}), (res) => {
					if (!res) {
						setTimeout(() => {
							this.getElRect(elClass, null);
						}, 10);
						return;
					}
					this[dataVal] = res.height
				}).exec()

			},
			// 打开修改商品的页面
			fcargoWayEdit(val) {
				uni.navigateTo({
					url: '/pages/equipment/cargoWayEdit?data=' + JSON.stringify(val)
				});
			},
			//一键补齐最大库存
			async stockDeviceChannal() {
				const res = await home.stockDeviceChannal({
					device_no: this.device_no,
					channel_no: 0,
				})
				if (res.code == 200) {
					this.getDeviceChannal(this.id)
				}
			},
		},
		options: {
			styleIsolation: 'shared'
		},
	}
</script>
<style>
	page {
		height: 100%;
		background: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.scroll{
		height: calc(100% -  constant(safe-area-inset-bottom));
		height: calc(100% -  env(safe-area-inset-bottom));
	}
	.btn {
		width: 138rpx;
		height: 58rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 58rpx;
		font-size: 26rpx;
		font-weight: 500;
	}

	.button2 {
		background: #FCB527;
		color: #FFFFFF;
	}

	@mixin btn($border: 0) {
		width: 50%;
		border-right: $border;
		height: 86rpx;
		line-height: 86rpx;
		color: #FCB527;
		font-size: 34rpx;
	}

	/deep/.u-number-box {
		// width: 185rpx;
		// height: 50rpx;
		border-radius: 10rpx;
		border: 1rpx solid rgba(153, 153, 153, 0.5);
	}

	/deep/.uni-input-wrapper {
		border-right: 1px solid rgba(153, 153, 153, 0.5);
		border-left: 1px solid rgba(153, 153, 153, 0.5);
	}

	/deep/.u-modal__content {
		padding: 20rpx 0 0 0 !important;
	}

	.main {
		height: 100%;

		.modal-btn {
			border-top: 1px solid #D8D8D8;

			.modal-btn-cofim {
				@include btn(1px solid #D8D8D8);
			}

			.modal-btn-cancal {
				@include btn;
			}
		}

		.u-wrap {
			height: calc(100%);
			/* #ifdef H5 */
			// height: calc(100% - var(--window-top));
			/* #endif */
			display: flex;
			flex-direction: column;
			// padding-top: 40rpx;
		}

		.u-menu-wrap {
			flex: 1;
			display: flex;
			overflow: hidden;
			padding-top: 20rpx;
		}

		.u-tab-view {
			width: 160rpx;
		}

		.u-tab-item {

			width: 150rpx;
			height: 66rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #444;
			font-weight: 400;
			line-height: 1;

			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
		}

		.u-tab-item-active {
			position: relative;
			color: #000;
			font-weight: 600;
			background: #E5E5E5;
			border-radius: 0rpx 100rpx 100rpx 0rpx;
		}

		.u-tab-item-active::before {
			content: "";
			position: absolute;
			height: 32rpx;
			left: 0;
			top: 39rpx;
		}

		.u-tab-view {
			height: 100%;
		}

		.page-view {
			padding: 16rpx;
		}

		.class-item {
			margin-bottom: 30rpx;
			background-color: #fff;
			padding: 16rpx;
			border-radius: 8rpx;
		}

		.item-title {
			font-size: 26rpx;
			color: $u-main-color;
			font-weight: bold;
		}

		.thumb-box {
			padding: 20rpx 0;
			// border: 1px solid gainsboro;
			box-shadow: 0rpx 2rpx 16rpx 3rpx rgba(238, 239, 240, 0.5);
			border-radius: 5rpx;
			background: #fff;
		}

		.item-menu-image {
			width: 120rpx;
			height: 120rpx;
			margin: 0 20rpx !important;
			border: 1px solid gainsboro;
		}

		.item-menu-name {
			font-weight: normal;
			font-size: 24rpx;
			color: $u-main-color;
		}

		.description {
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
	}
</style>